Structure sémantique HTML5

HTML approfondi

DSP - USAL33

Pourquoi la sémantique ?

HTML sémantique = utiliser les balises pour leur signification, pas leur apparence.

Bénéfice Explication
Accessibilité Les lecteurs d'écran comprennent la structure
SEO Les moteurs identifient les contenus importants
Maintenance Code plus lisible

⚠️ À éviter : <div> et <span> partout sans signification

Les balises structurelles HTML5

<body>
    <header> <!-- En-tête --> </header>
    <nav>    <!-- Navigation --> </nav>
    <main>
        <article> <!-- Contenu autonome --> </article>
        <section> <!-- Section thématique --> </section>
        <aside>   <!-- Complément --> </aside>
    </main>
    <footer> <!-- Pied de page --> </footer>
</body>

<header> — En-tête

Rôle : en-tête d'une page ou d'une section

Contenu typique : logo, titre principal, slogan, navigation

<header>
    <img src="logo.png" alt="Logo MonSite">
    <h1>Bienvenue sur MonSite</h1>
</header>

<nav> — Navigation

Rôle : liens de navigation principaux

<nav>
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

⚠️ Ne pas utiliser <nav> pour tous les groupes de liens

<main> — Contenu principal

Rôle : contenu principal unique de la page

  • Un seul <main> par page
  • Exclut le contenu répété (header, nav, footer, sidebar)
<main>
    <h1>Titre de la page</h1>
    <p>Contenu principal unique...</p>
</main>

💡 Les lecteurs d'écran peuvent sauter directement au <main>

<article> — Contenu autonome

Rôle : contenu autonome et réutilisable (article, commentaire, widget)

<article>
    <h2>Titre de l'article</h2>
    <p>Auteur : Jean Dupont</p>
    <p>Contenu...</p>
</article>

💡 Si vous pouvez le publier ailleurs tel quel, c'est un <article>

<section> — Section thématique

Rôle : regroupe un contenu thématique cohérent

<section>
    <h2>Nos services</h2>
    <p>Description...</p>
</section>

⚠️ Différence avec <div> : <section> a une signification thématique

<aside> — Contenu complémentaire

Rôle : contenu indirectement lié au principal

Contenu typique : barre latérale, encadrés, liens connexes

<aside>
    <h3>Articles similaires</h3>
    <ul>
        <li><a href="#">Article 1</a></li>
        <li><a href="#">Article 2</a></li>
    </ul>
</aside>

<footer> — Pied de page

Rôle : pied de page d'une page ou d'une section

Contenu typique : copyright, liens légaux, contact, réseaux sociaux

<footer>
    <p>&copy; 2026 MonSite. Tous droits réservés.</p>
    <nav>
        <a href="mentions-legales.html">Mentions légales</a>
        <a href="contact.html">Contact</a>
    </nav>
</footer>

Exemple de structure complète

<body>
    <header>
        <h1>Mon Blog</h1>
        <nav><a href="index.html">Accueil</a></nav>
    </header>
    <main>
        <article>
            <h2>Premier article</h2>
            <p>Contenu...</p>
        </article>
        <aside><h3>À propos</h3><p>Bio...</p></aside>
    </main>
    <footer><p>&copy; 2026</p></footer>
</body>